@import 'variables';
@import 'mixins';

body {
  color: $brand-text-color;
  background-color: $brand-bg-color;
}

code {
  background: $brand-bg-color-variant;
  padding: $space-2 $space-4;
}

// vue-icon global style
i {
  display: inline-block;
  height: $font-size;
  width: $font-size;
  fill: $brand-text-color;

  svg {
    height: inherit;
    width: inherit;
    fill: currentColor;
    stroke: currentColor;
  }

  g {
    stroke: currentColor;
  }
}

// UTILITIES
// =========

// always make sure images have an alt attribute
img:not([alt]) {
  border: 5px dashed $brand-danger;
}

// Only display content to screen readers
//
// See: https://a11yproject.com/posts/how-to-hide-content/
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
